@list-item-height: 32px;
@padding: 16px;
@switcher-width: 16px;
@switcher-left: 10px;

.custom-attribute-tree {
  padding: 12px 0;

  .empty-desc {
    margin-top: 24px;
    margin-left: 16px;
    // font-size: 12px;
    color: #686c78;
  }
  .conf-btn-wrapper {
    padding: 19px 16px 12px 16px;
  }
  .conf-btn {
    display: block;
    width: 120px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid #e6eaef;
    font-weight: 400;
    color: #686c78;
  }
  .ant-tree {
    // 字体样式, 每经过一个树层级，字体样式都做一次变更
    .name {
      font-size: 14px;
      color: #1e1f23;
    }

    li {
      padding: 0;
      line-height: @list-item-height;
    }
    .ant-tree-switcher {
      display: none;
    }
    .ant-tree-iconEle {
      width: 16px;
      margin-right: 6px;
      height: @list-item-height;
      line-height: @list-item-height - 2px;
      &:empty {
        display: inherit;
      }
    }

    .ant-tree-child-tree {
      padding-left: 0 !important;
    }
    .ant-tree-node-content-wrapper {
      width: 100%;
      padding: 0 @padding;
      height: @list-item-height;
      background-color: inherit !important;

      .ant-tree-title {
        width: calc(100% - 6px);
        height: @list-item-height;
        display: inline-flex;
        justify-content: space-between;
        align-items: center;

        .name {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .count {
          padding: 0 16px;
          color: #999ea8;
        }
      }
    }
    .ant-tree-child-tree {
      position: relative;
      &::before {
        content: '';
        display: block;
        position: absolute;
        top: -7px;
        left: 23px;
        overflow: hidden;
        width: 0;
        height: calc(100% - 8px);
        border-left: 1px dashed #d9d9d9;
        opacity: 0;
        transition: all 0.3s;
      }
      li {
        position: relative;
        &::before {
          content: '';
          display: block;
          position: absolute;
          top: 17px;
          left: 23px;
          overflow: hidden;
          width: 12px;
          height: 0;
          border-bottom: 1px dashed #d9d9d9;
          opacity: 0;
          transition: all 0.3s;
        }
      }
      &-open {
        &::before {
          opacity: 1;
        }
        li::before {
          opacity: 1;
        }
      }
    }
  }
}
